<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  level: number | string
  status: string
  empty: boolean
}
const props = withDefaults(defineProps<Props>(), {
  level: 0,
  status: '0',
})
const lightInnerColor = computed(() =>
  props.status === '0' ? 'rgba(34, 255, 226, 1)' : 'rgba(255, 123, 111, 1)',
)
const lightOuterColor = computed(() =>
  props.status === '0' ? 'rgba(34, 255, 226, 0.5)' : 'rgba(255, 123, 111, 0.5)',
)
const batteryColor = computed(() => {
  return +props.level <= 20 ? '#FF4545' : +props.level <= 40 ? '#FF8345' : '#45F3FF'
})
</script>

<template>
  <div class="charge-battery-container">
    <div class="charge-battery-content">
      <div class="w-[50%] h-full flex flex-col">
        <span v-if="!empty" class="text-[20px] mb-10 mt-5">{{ level }}%</span>
        <span v-else class="text-[20px] mb-10 mt-5">空仓</span>
        <div v-if="!empty" class="battery" mb-5>
          <div
            w-full
            padding-5
            :style="{ height: level + '%', background: batteryColor, filter: 'blur(5px)' }"
          />
        </div>
        <div v-else class="empty-door" />
      </div>
    </div>
    <div class="alarm-light" />
  </div>
</template>

<style scoped lang="scss">
.charge-battery-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}
.charge-battery-content {
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ffffff;
  display: flex;
  justify-content: center;
}
.alarm-light {
  width: 13px;
  height: 13px;
  background: v-bind(lightInnerColor);
  border-radius: 50%;
  position: relative;
  margin-top: 20px;
}
.alarm-light::before {
  position: absolute;
  width: 20px;
  height: 20px;
  background: v-bind(lightOuterColor);
  border-radius: 50%;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.battery {
  border: 2px solid #ffffff;
  flex: 1;
  position: relative;
  padding: 5px;
  display: flex;
  align-items: flex-end;
}
.battery::before {
  position: absolute;
  content: '';
  width: 40%;
  height: 5px;
  background-color: #fff;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.empty-door {
  border: 2px solid #ffffff;
  position: relative;
  padding: 5px;
  display: flex;
  align-items: flex-end;
  height: 50%;
}
</style>
